<template>
	<view class="index-page">
		<!-- 列表内容 -->
		<z-paging :refresher-enabled="refreshShow" :auto-clean-list-when-reload="false" lower-threshold="100"
			:show-default-loading-more-text="false" ref="paging" v-model="dataList" @query="queryList" :auto="false">
			<view slot="refresher" style="display: flex;justify-content: center;padding: 5rpx 0;">
				<image src="/static/loading/xlsx.gif" mode="aspectFit" style="width: 180rpx;height: 50rpx;"></image>
			</view>
			<view slot="top">
				<view class="top-box">
					<image :src="pageBg" class="pageBg" v-if="pageBg"></image>
					<view :style="{ height: $u.addUnit(30 + $u.sys().statusBarHeight, 'px'), }"></view>
					<view class="nav-box">
						<!-- 顶部导航 -->
						<view class="location" @click="selectAddress">
							<u-icon name="map-fill" size="16" color="#000000"></u-icon>
							<text style="margin: 0 10rpx; font-size: 28rpx">
								{{ searchData.city_id ? searchData.city_name : "获取中" }}
							</text>
							<u-icon name="arrow-down" size="16" color="#000000"></u-icon>
						</view>
						<view class="position" @click="againGetLocation">
							<text style="margin: 0 10rpx; font-size: 28rpx">重新定位</text>
							<u-icon name="reload" size="16" color="#9451F3"
								:class="reLoaction?'reload-animate':''"></u-icon>
						</view>
					</view>
					<!-- 分类标签栏 -->
					<view class="tabs-box">
						<view class="tab-list">
							<u-subsection class="custom-subsection" :list="tabs" :current="currentTab" fontSize="28rpx"
								bgColor="transparent" activeBg="#FEECFF" activeColor="#F169F6" @change="sectionChange">
							</u-subsection>
						</view>
						<view>
							<image src="/static/img/sx.png" style="width: 38rpx;height: 38rpx;margin-right: 40rpx;"
								@click="selectSearch"></image>
							<image src="/static/img/qieH.png" style="width: 38rpx;height: 38rpx;" @click="changeView">
							</image>
						</view>
						<!-- <view class="filter" @click="selectSearch">
							<u-icon name="list" size="18" color="#666"></u-icon>
							<text style="font-size: 28rpx">筛选</text>
						</view> -->
					</view>
				</view>
				<view v-if="!authLocation || locationClose"
					style="background: rgba(255, 233, 252, 1);display: flex;align-items: center;justify-content: space-between;height: 68rpx;padding: 0 40rpx;">
					<view>
						<image src="/static/dw.png"
							style="width: 26rpx;height: 26rpx;vertical-align: middle;margin-right: 10rpx;"></image>
						<text style="font-size: 24rpx;color: #F169F6;">未开启定位授权，可能无法给您推荐附近的人</text>
					</view>
					<text @click="handleOpenSetting" style="font-size: 24rpx;color: rgba(154, 154, 154, 1);">点击授权</text>
				</view>
			</view>
			<!-- 人员信息列表 -->
			<view class="list-box" v-if="false">
				<view class="list-item" v-for="(item, index) in dataList" :key="index" @click="lookUserDetail(item)">
					<view class="item-left">
						<view class="real-user" v-if="item.is_auth == 1">
							<image class="real-icon" src="../../static/common/real_user.png"></image>
						</view>
						<view :class="item.logintime_text == '在线' ? 'on-line line-green' : 'on-line line-yellow'"
							v-if="item.logintime_text">
							<view :class="item.logintime_text == '在线' ? 'dot dot-green': 'dot dot-yellow'"></view>
							{{ item.logintime_text }}
						</view>
						<image class="main-img" :src="item.avatar" mode="aspectFill" :lazyLoad="true"></image>
					</view>
					<view class="item-right">
						<view class="user-info">
							<view class="name-box">
								<text style="font-size: 32rpx">{{ item.nickname }}</text>
								<image v-if="item.vip" src="static/common/icon_vip.png" alt=""
									style="width: 80rpx; height: 24rpx; margin-left: 8rpx"></image>
							</view>
							<view class="detail">
								<text style="font-size: 24rpx">
									{{ item.city }} |{{ " " }}
									<text v-if="item.work">{{ item.work }} |{{ " " }}</text>
									{{ item.age }}岁 </text>
							</view>
							<view class="likeness"
								:class="item.head_xsd<80?'likeness1':item.head_xsd<90?'likeness2':'likeness'"
								@click.stop="showSimilarity = true"> 相似度 {{ item.head_xsd || 0 }}% </view>
							<view class="sub-images" v-if="item.images && item.images.length">
								<image v-for="(imgUrl, index) in item.images.slice(0, 3)" :key="index"
									:src="imgUrl.data" alt=""
									style="height: 100rpx; width: 80rpx; border-radius: 14rpx" />
							</view>
							<!-- <view class="sub-tips" v-else>
								该用户还未进行资料完善
							</view> -->
						</view>
						<view class="like" @click.stop="friendsFollow(item)" v-if="!item.is_focus_count">
							<image class="icon-image" src="../../static/common/icon_heart.png"></image>
							<text style="margin-left: 6rpx; font-size: 20rpx">喜欢</text>
						</view>
						<view class="private-chat" @click.stop="privateChat(item)" v-if="item.is_focus_count">
							<image class="icon-image" src="../../static/common/icon_private.png"></image>
							<text style="margin-left: 6rpx; font-size: 20rpx">私聊</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="viewType==2" style="padding: 0 32rpx;">
				<view class="box_2" style="display: flex;grid-gap:24rpx" v-for="(item,index) in dataList" :key="index"
					@click="lookUserDetail(item)">
					<image class="section_1" :src="item.avatar" mode="aspectFill"></image>
					<view class="section_2"
						style="display: flex;flex-direction: column;justify-content: space-between;">
						<view class="text-group_1">
							<text class="text_5">{{item.nickname}}</text>
							<view class="text-wrapper_2">
								<text class="text_6">{{item.age}}岁</text> <text class="text_7">｜</text>
								<text class="text_8">{{item.city}}</text>
								<text class="text_9">｜</text> <text class="text_10">{{item.work}}</text>
							</view>
						</view>
						<view class="text-wrapper_3" style="display: flex;text-align: center;"
							@click.stop="showSimilarity = true">
							<text class="text_11" style="flex:1">相似度</text>
							<text class="text_12" style="flex:1">{{item.head_xsd || 0}}%</text>
						</view>
					</view>
				</view>
			</view>
			<view class="user-grid" v-if="currentTab == 2">
				<view class="user-card" v-for="(user, index) in dataList" :key="index"
					@click.stop="lookUserDetail2(user)">
					<image :class="userInfo.vip ? 'blur-image' : 'blur-image filter8'" :src="user.avatar"
						v-if="isLogin && userInfo.gender == 1" mode="aspectFill"></image>
					<image :class="userInfo.is_auth == 1 ? 'blur-image' : 'blur-image filter8'" :src="user.avatar"
						v-if="isLogin && userInfo.gender == 2" mode="aspectFill"></image>
					<image class="blur-image filter8" :src="user.avatar" v-if="!isLogin" mode="aspectFill"></image>
					<view class="user-box">
						<view class="vip-tag" v-if="isLogin && userInfo.gender == 1 && !userInfo.vip">
							<image class="image" src="../../static/common/icon_vip2.png"></image>
							<text>仅会员可查看</text>
						</view>
						<view class="vip-tag" v-if="isLogin && userInfo.gender == 2 && !userInfo.is_auth == 1">
							<image class="image" src="../../static/common/icon_vip2.png"></image>
							<text>真人认证可查看</text>
						</view>
						<view class="user-info">
							<text class="name">{{user.nickname }}</text>
							<text class="new-tag">新人</text>
						</view>
						<view class="user-detail">
							<text>{{ user.age }}岁</text>
							<text class="divider">|</text>
							<text>{{ user.city }}</text>
							<!-- <text class="divider" v-if="item.work">|</text>
							<text class="distance" v-if="item.work">{{ user.work }}</text> -->
						</view>
						<view :class="userInfo.vip ? 'user-photos' : 'user-photos filter4'"
							v-if="isLogin && userInfo.gender == 1">
							<u-album :urls="user.images" maxCount="3" :multipleSize="28" :singleSize="28"
								:previewFullImage="false" keyName="data"></u-album>
						</view>
						<view :class="userInfo.is_auth == 1 ? 'user-photos' : 'user-photos filter4'"
							v-if="isLogin && userInfo.gender == 2">
							<u-album :urls="user.images" maxCount="3" :multipleSize="28" :singleSize="28"
								:previewFullImage="false" keyName="data"></u-album>
						</view>
					</view>
				</view>
			</view>
			<!-- 人员信息改版优化 -->
			<view class="list-box1" v-if="currentTab != 2 && viewType==1" @touchstart="touchStart" @touchend="touchEnd">
				<view v-if="gjLoading" v-for="item in 8" style="position: relative;">
					<u-skeleton background="rgba(0,0,0,.1)" :animate="false" rows="1" style="margin-bottom: 20rpx;"
						:title="false" loading :rows-height="240" :rows-width="['345rpx']">
					</u-skeleton>
					<u-skeleton :animate="true" style="position: absolute;left: 15px; bottom: 85px;z-index: 2;" rows="1"
						:title="false" loading :rows-height="20" :rows-width="[80]">
					</u-skeleton>
					<u-skeleton :animate="true" style="position: absolute;left: 15px; bottom: 55px;z-index: 2;" rows="1"
						:title="false" loading :rows-height="20" :rows-width="[36]">
					</u-skeleton>
					<u-skeleton :animate="true" style="position: absolute;left: 15px; bottom: 20px;z-index:2" rows="1"
						:title="false" loading :rows-height="20" :rows-width="[140]">
					</u-skeleton>
				</view>
				<view class="list-item1" v-for="(item, index) in dataList" :key="index"
					@click="lookUserDetail(item,index)">
					<view class="item-mask"></view>
					<image class="main-img1" :src="item.avatar" mode="aspectFill" :lazyLoad="true"></image>
					<view class="item-content">
						<view class="likeness"
							:class="item.head_xsd<80?'likeness1':item.head_xsd<90?'likeness2':'likeness'"
							@click.stop="showSimilarity = true" style="width: 180rpx;">
							<view class="left" style="text-align: center;width: 50%;">相似度</view>
							<view style="text-align: center;width: 50%;">{{ item.head_xsd || 0 }}%</view>
						</view>
						<view class="user-info">
							<view class="name-box">
								<text style="font-size: 32rpx">{{ item.nickname }}</text>
								<image v-if="item.vip" src="static/common/icon_vip.png" alt=""
									style="width: 80rpx; height: 24rpx; margin-left: 8rpx"></image>
							</view>
							<view class="detail">
								<text style="font-size: 24rpx">
									{{ item.city }} |{{ " " }}
									<text v-if="item.work">{{ item.work }} |{{ " " }}</text>
									{{ item.age }}岁 </text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: center;padding: 20rpx 0;align-items: center;"
				v-if="dataList.length>0">
				<text v-if="noData" style="color:rgb(193, 193, 193);font-size: 30rpx;">—— 没有更多了 ——</text>
				<image v-else src="/static/loading/xlsx.gif" mode="aspectFit" style="width: 180rpx;height: 30rpx;">
				</image>
			</view>
		</z-paging>
		<unLockPopup ref="lockRef" :show="showUnLock" @close="showUnLock = false" @success="unLockSuccess"
			:to_user_id="unLockDetail && unLockDetail.id">
		</unLockPopup>
		<userPopup :user-list="dataList" @change="lookUserDetail" ref="userRef" :show="showUser"
			@close="showUser = false" @followSuccess="followSuccess" :user_id="userDetail && userDetail.id"
			:current-user-indx="currentUserIndex">
		</userPopup>
		<vipPopup :show="showVip" @close="showVip = false" @success="vipRechageSuccess">
		</vipPopup>
		<authentication :show="showAuth" @close="showAuth = false" @success="authSuccess">
		</authentication>
		<similarityPopup :show="showSimilarity" @close="showSimilarity = false">
		</similarityPopup>
		<newPopup :show="showNew" @close="showNew = false" @success="vipReceiveSuccess">
		</newPopup>
		<updateApp ref="uRef"></updateApp>
		<toLogin ref="lRef"></toLogin>
		<browser-mask></browser-mask>
	</view>
</template>
<script>
	import {
		mapGetters
	} from "vuex";
	// #ifdef H5
	import wxsdk from "@/utils/wechat/sdk.js";
	// #endif
	import {
		HTTP_REDIRECT_URL
	} from "@/config/app";
	import unLockPopup from "@/components/UnLockPopup.vue";
	import userPopup from "@/components/UserPopup.vue";
	import vipPopup from "@/components/VipPopup.vue";
	import authentication from "@/components/Authentication.vue";
	import similarityPopup from "@/components/SimilarityPopup.vue";
	import newPopup from "@/components/NewPopup.vue";
	import updateApp from "@/components/updateApp.vue";
	import toLogin from "@/components/toLogin.vue";
	import browserMask from "@/components/browserMask/browserMask.vue";
	import permision from "@/js_sdk/wa-permission/permission.js"
	import {
		checkOpenGPSService,
		openSeting
	} from "../../utils/utils";
	export default {
		data() {
			return {
				tabs: ["同城"],
				currentTab: 0,
				dataList: [],
				longitude: "",
				latitude: "",
				searchData: {
					city_id: "",
					distance: "",
					age: "",
					head_xsd: "",
					hy_status: "",
				},
				userInfo: null,
				pageBg: "/static/common/page_bg2.png",
				showUnLock: false,
				unLockDetail: null,
				vipDetail: null,
				showUser: false,
				userDetail: null,
				showVip: false,
				showAuth: false,
				showSimilarity: false,
				showNew: false,
				gjLoading: true,
				reLoaction: false,
				noData: false,
				count: 1,
				viewType: 1,
				locationClose: false,
				refreshShow: false,
				authLocation: true,
				currentUserIndex: 0
			};
		},
		components: {
			newPopup: newPopup,
			vipPopup: vipPopup,
			userPopup: userPopup,
			unLockPopup: unLockPopup,
			authentication: authentication,
			similarityPopup: similarityPopup,
			updateApp: updateApp,
			toLogin,
			browserMask
		},
		computed: {
			...mapGetters(["isLogin"]),
		},
		watch: {
			isLogin(val) {
				if (val) {
					this.getUserInfo()
				}
			},
			showUser(val) {
				if (val) {
					uni.hideTabBar()
					//#ifdef H5
					history.pushState(null, null, "1")
					//#endif
				} else {
					uni.showTabBar()
				}
			},
			//#ifdef H5
			showAuth(val) {
				if (val) {
					history.pushState(null, null, "1")
				}
			},
			showSimilarity(val) {
				if (val) {
					history.pushState(null, null, "1")
				}
			},
			showVip(val) {
				if (val) {
					history.pushState(null, null, "1")
				}
			},
			//#endif
		},
		onLoad(options) {
			// #ifdef H5
			const currentUrl = window.location.href;
			const queryString = currentUrl.split("#")[0].split("?")[1];
			const parsedUrl = new URLSearchParams(queryString);
			const code = parsedUrl.get("code");
			if (code && this.isLogin) {
				this.bindWechat(code);
			}
			if (options && options.parent_user_id) {
				uni.setStorageSync("parent_user_id", options.parent_user_id);
			}
			this.getShareConfig();
			this.refreshShow = true
			// #endif
		},
		onBackPress() {
			if (this.showUser || this.showAuth || this.showUnLock || this.showVip || this.showSimilarity || this.showNew ||
				this.$refs.uRef.show || this.$refs.lRef.show) {
				if (this.showUser) {
					if (this.$refs.userRef.backPress()) {
						this.showUser = false
					}
				} else if (this.showUnLock) {
					if (this.$refs.lockRef.showVip || this.$refs.lockRef.showModal) {
						this.$refs.lockRef.showVip = false
						this.$refs.lockRef.showModal = false
					} else {
						this.showUnLock = false
					}
				} else {
					this.showSimilarity = false
					this.showVip = false
					this.showNew = false
					this.$refs.uRef.handleCancleUpdate()
					this.$refs.lRef.close()
				}
				return true
			}
		},
		onShow() {
			this.addListener()
			this.init()
			//#ifdef APP
			this.checkLocationAndAuth()
			//#endif
			//#ifdef H5
			this.handleShow()
			//#endif
		},
		onHide() {
			uni.setStorageSync('oldSearchData', uni.getStorageSync('searchData'))
			this.$refs.lRef.close()
			this.count++;
			this.removeListener()
		},
		destroyed() {},
		methods: {
			addListener() {
				//#ifdef H5
				window.addEventListener('popstate', this.popState)
				//#endif
			},
			removeListener() {
				//#ifdef H5
				window.removeEventListener('popstate', this.popState)
				//#endif
			},
			popState() {
				if (this.showUser) {
					if (this.$refs.userRef.backPress2()) {
						this.showUser = false
					}
					return
				}
				if (this.showAuth) {
					this.showAuth = false
					return
				}
				if (this.showSimilarity) {
					this.showSimilarity = false
					return
				}
				if (this.showVip) {
					this.showVip = false
					return
				}
				if (this.$refs.lRef.show) {
					this.$refs.lRef.close()
					return
				}
				window.history.back()
			},
			handleShow() {
				if (this.count === 1) {
					this.handleStart()
				} else {
					this.reload()
				}
			},
			checkLocationAndAuth() {
				uni.getLocation({})
				if (permision.checkSystemEnableLocation()) {
					this.locationClose = false
				} else {
					this.locationClose = true
					this.refreshShow = false
				}
				plus.android.checkPermission('android.permission.ACCESS_FINE_LOCATION', (status) => {
					if (status.checkResult == 0) {
						this.authLocation = true
						if (!this.locationClose) {
							this.refreshShow = true
							this.handleStart()
							this.handleShow()
						}
					} else {
						this.authLocation = false
						this.refreshShow = false
					}
				})
			},
			handleOpenSetting() {
				if (this.locationClose) {
					openSeting()
					return
				}
				if (!this.authLocation) {
					permision.gotoAppPermissionSetting()
					return
				}
			},
			init() {
				uni.showTabBar()
				uni.setTabBarStyle({
					backgroundColor: '#FFF',
					borderStyle: "black"
				})
			},
			changeView() {
				this.viewType = this.viewType == 1 ? 2 : 1
				this.dataList = []
				this.$refs.paging.reload(true);
			},
			touchStart(e) {
				this.startX = e.touches[0].clientX;
			},
			touchEnd(e) {
				const endX = e.changedTouches[0].clientX;
				if (this.startX - endX > 100) { // 右滑距离阈值
					uni.navigateTo({
						url: '/pages/index/videoPlay'
					});
				}
			},
			handleStart() {
				this.getLocationData();
				uni.getSystemInfo({
					success: (res) => {
						let brand = res.brand || ""
						if (brand.includes('xiaomi')) {
							uni.setTabBarStyle({
								fontSize: '15px'
							})
						}
					}
				})
			},
			reload() {
				let o = uni.getStorageSync('oldSearchData')
				let n = uni.getStorageSync('searchData')
				if (o.city_name != n.city_name || o.work != n.work || o.age != n.age || o.head_xsd != n.head_xsd) {
					this.searchData.city_id = n.city_id
					this.searchData.city_name = n.city_name
					if (this.searchData.city_id) {
						this.$refs.paging.reload(true)
					} else {
						this.handleStart()
					}
					uni.setStorageSync('oldSearchData', n)
				}
			},
			getShareConfig() {
				this.$Api["common"].getUserConfig({
					site: "share",
				}).then((res) => {
					// 构造分享的路径
					const sharePath = this.isLogin && this.userInfo ?
						`${HTTP_REDIRECT_URL}/#/pages/index/index?parent_user_id=${this.userInfo.id}` :
						HTTP_REDIRECT_URL;
					// 调用分享方法
					wxsdk.share({
							title: res.data.share_title,
							desc: res.data.share_desc,
							image: res.data.share_img,
							path: sharePath,
						},
						(response) => {
							console.log(response);
						});
				});
			},
			//重新定位
			againGetLocation() {
				if (this.reLoaction) return
				this.reLoaction = true
				uni.removeStorageSync("latitude");
				uni.removeStorageSync("longitude");
				this.getLocationData("new");
			},
			// 使用 async 函数包裹逻辑，方便异步处理
			async getLocationData(type) {
				// 尝试从缓存获取位置信息
				const cached = await this.getCachedLocation();
				// 定义位置获取成功后的统一处理函数
				const handleLocationSuccess = (res) => {
					// 存储新位置到本地（仅当获取到新位置时存储）
					if (!cached.latitude || !cached.longitude) {
						uni.setStorageSync("latitude", res.latitude);
						uni.setStorageSync("longitude", res.longitude);
					}
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.getLocation(type); // 获取位置详情
					this.isLogin && this.updateUserInfo(); // 已登录则更新信息
				};
				// 如果有缓存位置直接使用
				if (cached.latitude && cached.longitude) {
					handleLocationSuccess(cached);
				} else {
					try {
						// 无缓存时请求新位置
						const res = await this.requestNewLocation();
						if (!res.latitude || !res.longitude) {
							res.latitude = '39.904030';
							res.longitude = '116.407526';
						}
						handleLocationSuccess(res);
					} catch (error) {
						this.reLoaction = false
					}
				}
			},
			// 获取缓存位置（Promise封装）
			getCachedLocation() {
				return new Promise((resolve) => {
					const lat = uni.getStorageSync("latitude");
					const lng = uni.getStorageSync("longitude");
					resolve({
						latitude: lat || "",
						longitude: lng || "",
					});
				});
			},
			// 请求新位置（Promise封装）
			requestNewLocation() {
				return new Promise((resolve, reject) => {
					uni.getLocation({
						geocode: true,
						type: "wgs84",
						success: resolve,
						fail: (err) => {
							console.log(err);
							reject(new Error(`获取位置失败: ${err.errMsg || "未知错误"}`));
						},
					});
				});
			},
			bindWechat(code) {
				this.$Api["user"].bindWechat({
					code: code,
				}).then((res) => {
					location.replace(HTTP_REDIRECT_URL);
				});
			},
			//提交认证
			authSuccess() {
				this.showAuth = false;
				this.$Tips("/pages/authentication/authentication");
			},
			//vip充值成功
			vipRechageSuccess() {
				this.showVip = false;
				this.getUserInfo(2);
			},
			//vip领取功
			vipReceiveSuccess() {
				this.showNew = false;
				this.getUserInfo(2);
			},
			//关注成功
			followSuccess() {
				this.$refs.paging.refresh();
			},
			//选择地址
			selectAddress() {
				if (!this.isLogin) {
					this.$refs.lRef.open()
					return
				}
				if (this.userInfo.gender == 1) {
					if (!this.userInfo.vip) {
						this.showVip = true;
					} else {
						this.$Tips("/pages/index/select-address");
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true;
					} else {
						this.$Tips("/pages/index/select-address");
					}
				}
			},
			//选择搜索条件
			selectSearch() {
				if (!this.isLogin) {
					this.$refs.lRef.open()
					return
				}
				if (this.userInfo.gender == 1) {
					if (!this.userInfo.vip) {
						this.showVip = true;
					} else {
						this.$Tips("/pages/index/select-search");
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true;
					} else {
						this.$Tips("/pages/index/select-search");
					}
				}
			},
			lookUserDetail(item, index) {
				this.userDetail = item;
				this.currentUserIndex = index
				this.showUser = true;
			},
			lookUserDetail2(item) {
				this.userDetail = item;
				if (this.userInfo.gender == 1) {
					if (!this.userInfo.vip) {
						this.showVip = true;
					} else {
						this.showUser = true;
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true;
					} else {
						this.showUser = true;
					}
				}
			},
			unLockSuccess(id) {
				this.showUnLock = false;
				this.$refs.paging.refresh();
				this.$Tips("/pages/message/chart-message?user_id=" + id);
			},
			confirmUserUnLock(user_id) {
				this.$Api["user"].subUserUnLock({
					to_user_id: user_id,
					type: "1",
				}).then((res) => {
					this.unLockSuccess(user_id);
				});
			},
			privateChat(item) {
				if (!this.isLogin) {
					this.$refs.lRef.open()
					return
				}
				this.unLockDetail = item;
				if (this.userInfo.gender == 1) {
					if (item.is_unlock) {
						this.$Tips("/pages/message/chart-message?user_id=" + item.id);
					} else if (!item.is_unlock && this.userInfo.unlock_num != 0) {
						this.confirmUserUnLock(item.id);
					} else {
						this.showUnLock = true;
					}
				} else {
					if (this.userInfo.is_auth != 1) {
						this.showAuth = true;
					} else {
						this.$Tips("/pages/message/chart-message?user_id=" + item.id);
					}
				}
			},
			getUserInfo(type) {
				this.$Api["user"].getUserInfo().then((res) => {
					this.userInfo = res.data;
					// #ifdef H5
					this.getShareConfig();
					// #endif
					if (res.data.gender == 0) {
						return this.$Tips("/pages/mine/select-sex");
					}
					// if (res.data.gender == 1 && !res.data.parent_user_id) {
					// 	return this.$Tips("/pages/mine/improve-user");
					// }
					if (type == 1 && this.userInfo.is_tiyan == 2) {
						this.showNew = true;
					}
				});
			},
			//用户关注
			friendsFollow(item) {
				if (!this.isLogin) {
					this.$refs.lRef.open()
					return
				}
				this.$Api["user"].friendsFollow({
					user_id: item.id,
				}).then((res) => {
					this.$refs.paging.refresh();
				});
			},
			sectionChange(index) {
				// this.currentTab = index;
				if (index === 0) {
					this.dataList = [];
					this.refreshList();
				} else {
					uni.navigateTo({
						url: '/pages/index/videoPlay'
					})
				}
			},
			updateUserInfo() {
				this.$Api["user"].updateUserInfo({
					lng: this.longitude.toString(),
					lat: this.latitude.toString(),
				}).then((res) => {
					//保存用户经纬度
					this.getUserInfo(1);
				});
			},
			getLocation(type) {
				this.$Api.common.getCityByLat({
					lng: this.longitude.toString(),
					lat: this.latitude.toString(),
				}).then((res) => {
					let searchData = uni.getStorageSync("searchData") || {
						city_id: '',
						city_name: '',
						age: '',
						head_xsd: '',
						work: ''
					};
					// 确定是否需要更新城市数据
					const shouldUpdate = type === "new" || (!searchData.city_id && type !== "new");
					if (shouldUpdate) {
						// 统一更新逻辑
						const updatedData = {
							...searchData,
							city_id: res.data.id,
							city_name: res.data.name,
						};
						// 持久化存储
						uni.setStorageSync("searchData", updatedData);
						this.searchData.city_id = updatedData.city_id;
						this.searchData.city_name = updatedData.city_name;
						if (!searchData.city_id) {
							uni.setStorageSync('oldSearchData', updatedData)
							this.$refs.paging.refresh();
						} else {
							let a = uni.getStorageSync('oldSearchData')
							if (a.city_id != updatedData.city_id) {
								this.$refs.paging.reload(true);
								uni.setStorageSync('oldSearchData', updatedData)
							}
						}
					} else {
						// 非更新场景直接同步存储数据
						this.searchData.city_id = searchData.city_id;
						this.searchData.city_name = searchData.city_name;
						this.$refs.paging.refresh();
					}
				}).finally(() => {
					this.reLoaction = false
				})
			},
			handleTabClick(index) {
				this.currentTab = index;
			},
			refreshList() {
				this.$refs.paging.scrollToTop();
				this.$refs.paging.refresh();
			},
			queryList(pageNo, pageSize) {
				let searchData = uni.getStorageSync("searchData");
				let data = {
					page: pageNo,
					limit: pageSize,
					type: this.currentTab + 1,
					show_type: 1,
					...searchData,
				};
				if (this.currentTab == 3 || this.currentTab == 4) {
					data.city_id = "";
				}
				if (pageNo == 1) this.noData = false
				this.$Api.user.getUserList(data).then((res) => {
					this.$refs.paging.complete(res.data.data);
					if (res.data.current_page == res.data.last_page || res.data.last_page === 0) this.noData = true
				}).catch((res) => {
					this.$refs.paging.complete(false);
				}).finally(() => {
					this.gjLoading = false
				})
			},
		},
	};
</script>
<style lang="scss" scoped>
	.box_2 {
		margin-bottom: 28rpx;
	}

	.section_1 {
		border-radius: 14rpx;
		width: 176rpx;
		height: 176rpx;
	}

	.section_2 {
		margin: 8rpx 0 2rpx 0;
	}

	.text-group_1 {}

	.text_5 {
		overflow-wrap: break-word;
		color: rgba(50, 51, 52, 1);
		font-size: 32rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: center;
		white-space: nowrap;
		line-height: 32rpx;
		margin-right: 156rpx;
	}

	.text-wrapper_2 {
		width: 220rpx;
		height: 36rpx;
		overflow-wrap: break-word;
		font-size: 0;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
		margin-top: 24rpx;
	}

	.text_6 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_7 {
		overflow-wrap: break-word;
		color: rgba(209, 210, 212, 1);
		font-size: 24rpx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_8 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_9 {
		overflow-wrap: break-word;
		color: rgba(209, 210, 212, 1);
		font-size: 24rpx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text_10 {
		overflow-wrap: break-word;
		color: rgba(102, 102, 102, 1);
		font-size: 24rpx;
		font-family: SourceHanSansCN-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 36rpx;
	}

	.text-wrapper_3 {
		width: 114rpx;
		background: url(../../static/common/xiangsi.png) 0px 0px no-repeat;
		background-size: 114rpx 26rpx;
		padding: 0 8rpx 0 6rpx;
	}

	.text_11 {
		overflow-wrap: break-word;
		color: rgba(113, 69, 71, 1);
		font-size: 16rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		white-space: nowrap;
		line-height: 22rpx;
		margin-top: 2rpx;
	}

	.text_12 {
		overflow-wrap: break-word;
		color: rgba(251, 224, 223, 1);
		font-size: 18rpx;
		font-family: PingFangSC-Semibold;
		font-weight: 600;
		white-space: nowrap;
		line-height: 26rpx;
		margin-bottom: -2rpx;
	}

	.reload-animate {
		animation: roate 1.8s ease infinite;
	}

	@keyframes roate {
		0% {
			transform: rotateZ(0deg);
		}

		100% {
			transform: rotateZ(359deg);
		}
	}

	.index-page {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background-color: #ffffff;
	}

	.top-box {
		position: relative;

		.pageBg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 176rpx;
		}

		.nav-box {
			display: flex;
			align-items: center;
			padding: 0rpx 30rpx 22rpx;
			position: relative;
			z-index: 10;

			.location,
			.position {
				display: flex;
				align-items: center;
				margin-right: 40rpx;
				font-size: 28rpx;
				color: #323334;
			}

			.location {
				font-weight: bold;
			}

			.position {
				color: #9451f3;
			}
		}

		.tabs-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 25rpx;
			height: 48rpx;
			position: relative;
			z-index: 10;

			.tab-list {
				width: 20%;
			}

			.filter {
				display: flex;
				align-items: center;
				gap: 4rpx;
				font-size: 28rpx;
				color: #666;
				margin-right: 10rpx;
			}
		}
	}

	.list-item {
		display: flex;
		justify-content: start;
		align-items: flex-start;
		padding: 20rpx 20rpx 0;
		margin-bottom: 18rpx;
		background: #fff;
		border-radius: 12rpx;

		.item-left {
			position: relative;
			width: 200rpx;
			height: 262rpx;
			margin-right: 26rpx;
			padding-bottom: 22rpx;
			padding-top: 10rpx;

			.real-user {
				position: absolute;
				left: 0;
				top: 0;
				width: 72rpx;
				height: 26rpx;
				background: #f169f6;
				border-radius: 6rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;

				.real-icon {
					width: 72rpx;
					height: 26rpx;
				}
			}

			.on-line {
				position: absolute;
				right: 0;
				top: 10rpx;
				padding: 0 10rpx;
				height: 26rpx;
				padding: 4rpx 4rpx;
				background: rgba(#000000, 0.5);
				border-radius: 0 14rpx 0rpx 14rpx;
				z-index: 10;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.dot {
					width: 6rpx;
					height: 6rpx;
					border-radius: 50%;
					margin-right: 4rpx;
				}
			}

			.line-green {
				color: #28c445;
			}

			.dot-green {
				background: #28c445;
			}

			.line-yellow {
				color: #ffc210;
			}

			.dot-yellow {
				background: #ffc210;
			}

			.main-img {
				position: relative;
				width: 200rpx;
				height: 252rpx;
				margin-right: 20rpx;
				border-radius: 14rpx;
			}
		}

		.item-right {
			flex: 1;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-bottom: 2rpx solid #e6e5e5;
			padding-bottom: 22rpx;
			padding-top: 20rpx;

			.user-info {
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				flex: 1;
				height: 262rpx;

				.likeness {
					background: #f169f6;
					border-radius: 14rpx;
					text-align: center;
					font-size: 18rpx;
					width: fit-content;
					color: #ffffff;
					padding: 6rpx 10rpx;
					margin-top: 10rpx;
				}

				.sub-images {
					display: flex;
					flex-direction: row;
					gap: 10rpx;
					margin-top: 10rpx;
				}

				.sub-tips {
					font-size: 20rpx;
					color: #999;
					margin-top: 10rpx;
				}

				.sub-images image {
					width: 55rpx;
					height: 55rpx;
					border-radius: 4rpx;
				}

				.name {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 16px;
					font-weight: bold;
					color: #333;
				}

				.vip {
					font-size: 12px;
					color: #ff69b4;
					border: 1px solid #ff69b4;
					padding: 0 4rpx;
					border-radius: 4rpx;
				}

				.detail {
					font-size: 12px;
					color: #999;
					padding: 10rpx 0;
				}
			}

			.icon-image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 4rpx;
			}

			.like {
				width: 104rpx;
				height: 44rpx;
				background: #feecff;
				border-radius: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #ff69b4;
				margin-top: 40rpx;
			}

			.private-chat {
				width: 104rpx;
				height: 44rpx;
				background: #e9d9ff;
				border-radius: 22rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #9451f3;
				margin-top: 40rpx;
			}
		}
	}

	.list-box1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		padding: 20rpx 25rpx;
		padding-bottom: 0rpx;

		.list-item1 {
			width: 49.1%;
			position: relative;

			.item-mask {
				position: absolute;
				bottom: 5px;
				left: 0;
				top: 0;
				right: 0;
				border-radius: 12rpx;
				background-color: rgba(#000000, 0.15);
				z-index: 2;
			}

			.main-img1 {
				width: 100%;
				border-radius: 12rpx;
			}

			.item-content {
				position: absolute;
				bottom: 15px;
				left: 10px;
				z-index: 3;

				.likeness {
					width: 75px;
					height: 18px;
					background: url('../../static/common/xiangsi.png') no-repeat center;
					background-size: 100% 100%;
					line-height: 18px;
					margin-bottom: 10px;
					font-size: 12px;
					text-align: center;
					// padding-right: 10px;
					color: #ffffff;
					display: flex;
					justify-content: space-between;

					.left {
						color: #714547;
						//padding-right: 15px;
					}
				}

				.likeness1 {
					background: url('../../static/common/xsd1.png') no-repeat center;
					background-size: 100% 100%;
				}

				.likeness2 {
					background: url('../../static/common/xsd2.png') no-repeat center;
					background-size: 100% 100%;
				}

				.user-info {
					color: #ffffff;
				}
			}
		}
	}

	.user-grid {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: 20rpx;
		padding: 20rpx;
	}

	.user-card {
		width: 336rpx;
		height: 336rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		background-size: 100% 100%;
		color: #ffffff;

		.blur-image {
			position: absolute;
			z-index: 10;
			width: 100%;
			height: 100%;
		}

		.filter4 {
			filter: blur(4rpx);
		}

		.filter8 {
			filter: blur(8rpx);
		}

		.user-box {
			width: 100%;
			height: 100%;
			position: relative;
			z-index: 10;
		}

		.vip-tag {
			position: absolute;
			top: 20rpx;
			left: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #4b140d;
			border-radius: 8rpx;
			padding: 8rpx 10rpx;
			height: 36rpx;

			.image {
				width: 24rpx;
				height: 20rpx;
				margin-right: 8rpx;
			}

			text {
				font-size: 13px;
				color: #ffd35e;
			}
		}

		.user-info {
			padding: 160rpx 20rpx 10rpx 26rpx;
			display: flex;
			align-items: center;

			.name-box {
				font-size: 30rpx;
				font-weight: bold;
			}

			.new-tag {
				margin-left: 12rpx;
				width: 56rpx;
				padding: 10rpx 0;
				background-color: #f169f6;
				font-size: 20rpx;
				color: #ffffff;
				border-radius: 6rpx;
				text-align: center;
			}
		}

		.user-detail {
			padding: 0 10rpx 20rpx 26rpx;
			display: flex;
			align-items: center;
			font-size: 24rpx;

			.divider {
				margin: 0 10rpx;
			}

			.distance {
				color: #f169f6;
			}
		}

		.user-photos {
			display: flex;
			padding: 0 20rpx 20rpx;

			.photo-item {
				width: 80rpx;
				height: 80rpx;
				margin-right: 10rpx;
				background-color: #f0f0f0;
				border-radius: 8rpx;
			}
		}
	}
</style>